<!--
 * @Description: 书籍列表
 * @Author: zhangweigang
 * @Date: 2021-02-14 20:08:05
 * @LastEditTime: 2021-04-05 10:43:05
 * @LastEditors: zhangweigang
-->
<template>
  <div>
    <Header></Header>
    <curr-locat title="书籍列表"></curr-locat>
    <div class="contain">
      <el-row :gutter="20" type="flex" align="middle">
        <el-col :span="4">
          <el-input v-model="bookName" :clearable="clearable" placeholder="请输入书籍名称" @clear="contentClear"></el-input>
        </el-col>
        <el-col :span="2" align="center">
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-col>
      </el-row>
      <el-table class="pag" :data="listData" stripe border>
        <el-table-column prop="name" label="书籍名称" header-align="center"></el-table-column>
        <el-table-column prop="author" label="作者" header-align="center"></el-table-column>
        <el-table-column prop="categoryName" label="书籍分类" header-align="center"></el-table-column>
        <el-table-column prop="createDate" label="上传时间" header-align="center"></el-table-column>
        <el-table-column label="操作" header-align="center">
          <template slot-scope="scope">
            <!-- 查看按钮  -->
            <a :href="scope.row.bookUrl" target="_black" class="a-text">在线阅读</a>
          </template>
        </el-table-column>
      </el-table>
      <!-- 书籍分页 -->
      <div class="pag">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { getBookPagination, getBookByName } from '../../network/product.js';
export default {
  data() {
    return {
      clearable: true, // 是否显示清除按钮
      currentPage: 1,
      total: 0,
      // 默认分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 每页显示多少条数据
      bookName: '', // 搜索关键字
      listData: [] // 书籍列表
    };
  },
  created() {
    // 书籍分页
    this.getPageData(this.pageNum, this.pageSize, 1);
  },
  methods: {
    // 监听 pagesize 改变事件
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getPageData(this.pageNum, pageSize, 1);
    },
    // 监听 页码值 改变事件
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getPageData(pageNum, this.pageSize, 1);
    },
    /**
     * 书籍分页数据
     * @pageNum 当前页数
     * @pageSize 每页显示多少条数据
     */
    getPageData(pageNum, pageSize, isShare) {
      getBookPagination(pageNum, pageSize, isShare).then((res) => {
        if (res.data.code === 0) {
          console.log(res, '所有共享书籍');
          this.total = res.data.total;
          // 获取留言列表
          this.listData = res.data.rows;
        } else {
          this.$message({
            showClose: true,
            message: '获取失败，请联系管理员！',
            type: 'error',
            duration: 4000
          });
          return;
        }
      });
    },
    // 查询书籍
    onSubmit() {
      let params = {
        name: this.bookName
      };
      getBookByName(params).then((res) => {
        if (res.data.code === 0) {
          this.total = res.data.total;
          this.listData = res.data.rows;
          this.$message.success('查询成功！');
        }
      });
    },
    contentClear() {
      this.getPageData(this.pageNum, this.pageSize, 1);
    },
    toNewPage(url) {
      console.log(url);
      console.log(url.bookUrl, '12');
      // window.open(u  rl);
      // let win =
      // :href="" target="_blank"
    }
  }
};
</script>

<style lang="less" scoped>
.row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #a29a9a;
  color: #333;
  font-size: 16px;
  div[class^='col-'] {
    padding: 15px;
  }
  .col-1 {
    flex: 1;
  }
  .col-2 {
    flex: 1;
  }
  .col-3 {
    flex: 1;
  }
  .col-4 {
    flex: 2;
  }
}
.pag {
  margin-top: 20px;
}
.a-text {
  text-decoration: underline;
  color: red;
  cursor: pointer;
}
</style>
